import React from 'react';
import { loc, ck_int, KSelect, ck_empty, useKForm, KDlg, KInput } from 'sui';

const gnum = ["gnum1", "gnum2", "gnum3", "gnum4"];

const g_type = () => {
    const ret = [
        {sn: "fix", name: loc("l_650")},
        {sn: "num", name: loc("l_665")},
    ];

    gnum.forEach((d, i) => {
        let name = loc("l_664");
        ret.push({sn: d, name: `${name}  ${i + 1}`});
    });

    ret.push({sn: "date", name: loc("l_663")});

    return ret;
};

const is_gnum = (sn) => {
    const f = gnum.find(d => d === sn);
    if (f) {
        return true;
    }

    return false;
};

const gt_num = () => {
    return [
        {sn: "day", name: loc("l_661")},
        {sn: "max", name: loc("l_662")},
    ];
};

const gdate = [
    {sn: "tj", name: "TIMG GroupCode", c: 2},
    {sn: "%Y%m%d", name: "20010304 (YYYYMMDD)", c: 8},
    {sn: "%y%m%d", name: "010304 (YYMMDD)", c: 6},
    {sn: "YYM", name: "013 (YYM)", c: 3},
    {sn: "gb34014", name: "GB 34014", c: 3},
    {sn: "gb16735", name: "GB 16735", c: 3},
];

const code_value = (data) => {
    const tp = g_type();
    const f = tp.find(d => data.type === d.sn);
    if (!f) {
        return;
    }

    const num_lst = gt_num();

    data["utype"] = f.name;

    if (f.sn === "fix") {
        data["value"] = <div className="font-bold">{data.val}</div>;
    }
    else if (f.sn === "num" || is_gnum(f.sn)) {
        const t = num_lst.find(d => data.range === d.sn);
        if (!t) {
            return;
        }

        data["value"] = (
            <div className="inline-flex">
                <div>{loc("l_649")}<span className="ml-2 bg-blue-200 px-2 rounded-lg">{data.val}</span></div>
                <div className="mx-4">{loc("l_646")}<span className="ml-2 bg-blue-200 px-2 rounded-lg">{data.max}</span></div>
                <div>{loc("l_647")}<span className="ml-2 bg-blue-200 px-2 rounded-lg">{t.name}</span></div>
            </div>
        );
    }
    else if (f.sn === "date") {
        const t = gdate.find(v => v.sn === data.date);
        data["value"] = <div>{loc("l_648")}<span className="ml-2 bg-blue-200 px-2 rounded-lg">{t.name}</span></div>;
    }
};

const DlgVal = (props) => {
    const form = useKForm(props.data);

    const ck = {
        type: (v) => ck_empty(v, loc("l_656")),
        name: (v) => ck_empty(v, loc("l_231")),
        num: (v) => ck_int(v, loc("l_658")),
        range: (v) => {
            const tp = form.get("type");
            if (tp === "num" || is_gnum(tp)) {
                return ck_empty(v, loc("l_659"));
            }

            return null;
        },
        max: (v) => {
            const tp = form.get("type");
            if (tp === "num" || is_gnum(tp)) {
                const ret = ck_int(v, loc("l_660"));
                if (ret) {
                    return ret;
                }

                const num = parseInt(form.get("num"), 10);
                if (v.length > num) {
                    return loc("l_666");
                }
            }

            return null;
        },
        date: (v) => {
            const tp = form.get("type");
            if (tp === "date") {
                const ret = ck_empty(v, loc("l_655"));
                if (ret) {
                    return ret;
                }

                const t = gdate.find(d => d.sn === v);
                const num = parseInt(form.get("num"), 10);

                if (t.c !== num) {
                    return `${loc("l_654")} ${t.c}`;
                }
            }

            return null;
        },
        val: (v) => {
            const tp = form.get("type");
            if (tp === "date") {
                return null;
            }

            const ret = ck_empty(v, loc("l_667"));
            if (ret) {
                return ret;
            }

            if (tp === "fix") {
                const num = parseInt(form.get("num"), 10);
                if (v.length !== num) {
                    return loc("l_653");
                }
            }
            else if (tp === "num" || is_gnum(tp)) {
                if (v === "0") {
                    return null;
                }

                return ck_int(v, loc("l_652"));
            }

            return null;
        }
    };

    const isShow = (tp) => {
        const f = tp.find(d => d === form.get("type"));
        if (f) {
            return "";
        }

        return "hidden";
    };

    const labVal = () => {
        const type = form.get("type");

        if (type === "fix") {
            return loc("l_650");
        }
        else if (type === "num" || is_gnum(type)) {
            return loc("l_649");
        }

        return "";
    };

    const getVtp = () => {
        const ret = {
            "num": "num",
        };

        const tp = form.get("type");
        if (tp === "num" || is_gnum(tp)) {
            ret["val"] = "num";
            ret["max"] = "num";
        }

        return ret;
    };

    return (
        <KDlg {...props} title={loc("l_651")} ck={ck} form={form} width="md" htp={getVtp}>
            <div className="flex flex-col">
                <div className="inline-flex items-center">
                    <KSelect label={loc("l_229")} name="type" form={form} lst={g_type()} className="mt-2"/>
                    <KInput label={loc("l_228")} name="name" form={form} className="mx-2"/>
                    <KInput label={loc("l_644")} name="num" form={form}/>
                </div>
                <KInput className={`${isShow(["fix", "num",  ...gnum])}`} label={labVal()} name="val" form={form}/>
                <KInput className={`${isShow(["num", ...gnum])}`} label={loc("l_646")} name="max" form={form}/>
                <KSelect className={`${isShow(["num", ...gnum])} mt-4`} label={loc("l_647")} name="range" form={form} lst={gt_num()}/>
                <KSelect className={`${isShow(["date"])} mt-4`} label={loc("l_648")} name="date" form={form} lst={gdate}/>
            </div>
        </KDlg>
    );
};

export {code_value, DlgVal};
